/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import "../../styles/themes/cdap/mixins.less";

body.state-overview {
  .welcome-banner {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 130px;
    background: url('@{img-path}/CDAP_promo_ad.jpg') no-repeat left center;
    background-size: cover;

    .btn-close {
      position: absolute;
      font-size: 25px;
      top: 15px;
      right: 15px;
      color: #ccc;
      padding: 5px;
      cursor: pointer;
    }

    .banner-title, .banner-content { color: white; }
    .banner-title {
      font-size: 39px;
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 5px;
      line-height: 43px;
    }
    p { margin-left: 3px; }

    .banner-content {
      margin-top: 30px;
    }
    .text-content {
      margin-left: 80px;
      font-size: 14px;
    }

    .hydrator-banner {
      background: url('@{img-path}/Hydrator_logo.png') no-repeat left center;
    }
    .tracker-banner {
      background: url('@{img-path}/tracker_logo.png') no-repeat left center;
    }

    .btn {
      margin-left: 15px;
      font-size: 16px;
      font-weight: 500;
      padding: 3px 14px;
      color: white;
      vertical-align: top;
      margin-top: 8px;

      &.btn-hydrator { background-color: @hydrator-blue; }
      &.btn-tracker { background-color: @tracker-green; }
    }
  }

  .system-health-title-offset {
    margin-top: 110px;
  }

  .alerts {
    top: 50px;
  }

  section {

    &.system-health {
      margin: 20px 0;
      padding: 0;
      position: relative;
      div.divider {
        @media (min-width: @screen-lg-min) {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 38.2%;
          background-color: @body-bg;
          width: 2px;
        }
        + div {
          padding: 15px;
        }
      }
      h2 {
        margin-top: 0;
      }
      .c3 {
        svg {
          .border-radius(8px);
          .box-shadow(none);
        }
      }
      .c3-tooltip-container {
        text-align: left;
      }
      .col-lg-4 {
        white-space: nowrap;
        .col-xs-4 {
          padding-right: 0;
          > div {
            height: 80px;
          }
        }
        .col-xs-8 {
          padding-left: 0;
          @media (max-width: @screen-xs-max) {
            p {
              font-size: 10px;
            }
          }
        }
        > div {
          height: 90px;
          line-height: 90px;
          max-width: 340px;
          .border-radius(50px);
          @media (max-width: @screen-md-max) {
            margin: 0 auto;
          }
          @media (min-width: @screen-lg-min) {
            position: relative;
            top: 30px;
            left: 15px;
            margin-left: 28px;
          }
        }
        svg {
          position: relative;
          top: -25px;
          left: 0;
        }
        p {
          position: relative;
          left: -12px;
          font-weight: 500;
          white-space: nowrap;
          text-align: center;
        }
      }
      .col-lg-8 {
        p {
          margin: 0;
          span {
            display: block;
            font-weight: 500;
            padding-bottom: 10px;
          }
        }
        @media (max-width: @screen-md-max) {
          text-align: center;
        }
        @media (min-width: @screen-lg-min) {
          text-align: center;
          p.text-center {
            padding-left: 55px;
          }
        }
        .health-widget {
          display: inline-block;
          position: relative;
          > span {
            font-size: 12px;
            position: absolute;
            top: 5px;
            left: 10px;
            z-index: 10;
          }
          .c3-line {
            stroke-width: 2px;
          }
          @media (max-width: @screen-xs-max) {
            display: block;
            max-width: 280px;
            margin: 0 auto;
          }
        }
        .health-widgets + .health-widget {
          @media (min-width: @screen-sm-min) {
            margin-right: 28px;
          }
          @media (min-width: @screen-lg-min) {
            margin-left: 56px;
          }
        }
        .warning-alert {
          position: relative;
          font-weight: 700;
          margin-top: 25px;
          width: 100%;
          > div {
            position: absolute;
            right: 0;
            bottom: 2px;
            z-index: 10;
            p {
              display: inline-block;
              font-size: 11px;
              font-weight: 500;
              letter-spacing: 0.5px;
              vertical-align: middle;
            }
          }
          span {
            height: 16px;
            line-height: 16px;
            min-width: 25px;
            display: inline-block;
            font-weight: 400;
            margin: 0 10px;
            padding: 0 5px;
            text-align: center;
            vertical-align: middle;
            .border-radius(2px);
            &.warn {
              margin-right: 15px;
            }
            &.error {
              margin-right: 0;
            }
          }
        }
      }
    }
    &.data-apps {
      padding: 0 0 20px;
      .icon-hydrator {
        font-size: 12px;
      }
      h3 {
        margin-bottom: 18px;
      }
      .btn {
        font-size: 12px;
      }
      .col-sm-3 {
        p {
          font-weight: bold;
          line-height: 24px;
          margin-bottom: 0;
          white-space: nowrap;
        }
      }
      .col-sm-9 {
        text-align: left;
        @media (min-width: @screen-sm-min) {
         text-align: right;
        }
      }
      .col-md-6 {
        @media (min-width: @screen-md-min) {
          &:first-child > div {
            margin-right: 15px;
          }
          &:last-child > div {
            margin-left: 15px;
          }
        }
      }
      .list-group {
        margin-top: 20px;
        .border-radius(@border-radius-base);
        .title-type-image {
          line-height: 18px;
          span {
            font-size: 12px;
            vertical-align: middle;
          }
        }
      }
      .list-group-item {
        padding: 0;
        .border-radius(@border-radius-base);
        .transition(all 0.2s ease-in-out);
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        a {
          display: block;
          padding: 10px 15px;
          &:hover, &:focus {
            text-decoration: none;
          }
        }
        p {
          margin-bottom: 0;
          font-size: 15px;
          font-weight: 400;
        }
      }
      my-file-select button {
        .border-radius(0 4px 4px 0);
        margin-left: -1px;
      }
    }
  }

  &.theme-cdap {
    .panel-message {
      small {
        color: @cdap-bluegray;
      }
      p {
        color: #5F6674;
      }
    }
    section {
      color: @cdap-header;
      &.system-health {
        background-color: white;
        color: @cdap-bluegray;
        border: 1px solid #d1d4dc;
        p, span { color: @cdap-bluegray; }
        .c3 {
          svg {
            border: 1px solid rgba(0,0,0,0.1);
            background-color: @cdap-header;
          }
        }
        .col-lg-4 {
          > div {
            background-color: @panel-default-border;
          }
        }
        .col-lg-8 {
          .health-widget {
            > span {
              color: @body-bg;
            }
          }
          .warning-alert {
            span {
              color: white;
              &.warn {
                background-color: @brand-warning;
              }
              &.error {
                background-color: red;
              }
            }
          }
        }
      }
      &.data-apps {
        .col-md-6 {
          h3 + p {
            color: @cdap-bluegray;
          }
        }
        .col-sm-3 {
          p {
            color: #5F6674;
          }
        }
        button.white-dropdown {
          .box-shadow(none);
        }
        li.list-group-item {
          background-color: white;
          a, p {
            color: @cdap-bluegray;
          }
          &:hover, &:focus {
            background-color: @cdap-bluegray;
            a, p {
              color: white;
            }
          }
        }
      }
    }
  }
}
